<template>
  <div class="brandList">
    <!-- 表格 -->
    <el-card class="formTable">
      <!-- //新增按钮 -->
      <div class="addBtn">
        <el-button size="mini" type="primary" @click="handleEdit"
          >新增</el-button
        >
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" border size="small">
        <el-card>
          <el-card class="main-header" shadow="never" />
          <el-table-column
            label="序号"
            fixed="left"
            type="index"
            align="center"
          />
          <el-table-column
            label="品牌名称"
            align="center"
            width="200"
            prop="name"
          />
          <el-table-column label="展示状态" align="center" width="200">
            <template slot-scope="scope">
              <div>
                是否展示
                <el-switch
                  v-model="scope.row.showStatus"
                  :active-value="1"
                  :inactive-value="0"
                  @change="switchShowStatus(scope.row)"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="logo" align="center" width="140">
            <template slot-scope="scope">
              <div>
                <el-image
                  :src="scope.row.logo"
                  fit="fill"
                  style="width: 100px; height: 100px"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="专用大图" align="center" width="140">
            <template slot-scope="scope">
              <div>
                <el-image
                  :src="scope.row.bigPic"
                  fit="fill"
                  style="width: 100px; height: 100px"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            prop="createTime"
            align="center"
            width="200"
          />
          <el-table-column
            label="排序"
            prop="sort"
            align="center"
            width="140"
          />
          <el-table-column
            label="产品数量"
            prop="productCount"
            align="center"
            width="140"
          />
          <el-table-column
            label="品牌制造商"
            prop="factoryStatus"
            align="center"
            width="140"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.factoryStatus == 1 ? '是' : '不是' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="140"
          >
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="text"
                style="color: #f00"
                @click="handleDelete(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-card>
      </el-table>
      <!-- 分页 -->
      <div class="main-footer">
        <el-pagination
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 编辑修改 -->
    <el-drawer
      class="innerEdit"
      style="width: 60%; height: 1000px; margin: 120px auto"
      title="品牌详情"
      direction="ttb"
      size="50%"
      :before-close="handleClose"
      :visible.sync="innerDrawer"
    >
      <el-form
        ref="productInfo"
        class="detailInfo"
        :model="brandInfo"
        label-width="130px"
        size="mini"
      >
        <el-form-item label="品牌名称">
          <el-input v-model="brandInfo.name" style="width: 80%" />
        </el-form-item>
        <el-form-item label="首字母">
          <el-input v-model="brandInfo.firstLetter" style="width: 80%" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="brandInfo.sort" style="width: 80%" />
        </el-form-item>
        <el-form-item label="产品数量">
          <el-input v-model="brandInfo.productCount" style="width: 80%" />
        </el-form-item>
        <el-form-item label="是否展示">
          <el-switch
            v-model="brandInfo.showStatus"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="是否为品牌供应商">
          <el-switch
            v-model="brandInfo.factoryStatus"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="上传专区大图">
          <el-upload
            class="avatar-uploader"
            :action="baseUrl"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleBigPicSuccess"
          >
            <img
              v-if="brandInfo.bigPic"
              :src="brandInfo.bigPic"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="上传logo">
          <el-upload
            :headers="headers"
            class="avatar-uploader"
            :action="baseUrl"
            :show-file-list="false"
            :on-success="handleLogoSuccess"
          >
            <img v-if="brandInfo.logo" :src="brandInfo.logo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="" size="normal">
          <div class="btn" size="small">
            <el-button type="primary" @click="addBrand">确定</el-button>
            <el-button @click="handleClose">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import {
  addBrand,
  delBrand,
  findBrandByPage,
  switchShowStatus,
  updateBrand
} from '@/api/commodities/brandList/index'
import mixins from '@/mixins/index'
export default {
  mixins: [mixins],
  data() {
    return {
      tableData: [],
      brandInfo: {
        bigPic: '',
        logo: ''
      },
      innerDrawer: false,
      isModify: false
    }
  },
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    init() {
      findBrandByPage(this.page.currentPage, this.page.pageSize).then((res) => {
        this.page.total = res.data.total
        this.tableData = res.data.rows
      })
    },
    // 删除品牌
    handleDelete(id) {
      this.delData(id, delBrand)
    },
    // 控制
    handleEdit(val) {
      console.log(val)
      if (val.id) {
        // isModify控制按钮字体
        this.isModify = true
        this.innerDrawer = true
        this.brandInfo = val
      } else {
        this.isModify = false
        this.innerDrawer = true
        this.brandInfo = this.$options.data().brandInfo
        this.selectedOptions = this.$options.data().selectedOptions
      }
    },
    // 添加或修改地址
    addBrand() {
      if (this.isModify) {
        updateBrand(this.brandInfo).then((res) => {
          if (res.success) {
            this.$message.success('修改成功!')
            this.isModify = false
            this.innerDrawer = false
          } else {
            this.$message.error('修改失败!')
          }
        })
      } else {
        addBrand(this.brandInfo).then((res) => {
          if (res.success) {
            this.$message.success('添加成功!')
            this.isModify = false
            this.innerDrawer = false
            this.init()
          } else {
            this.$message.error('添加失败!')
          }
        })
      }
    },
    // 切换展示状态
    switchShowStatus(val) {
      switchShowStatus({ id: val.id, status: val.showStatus }).then((res) => {
        if (res.success) {
          this.$message.success('展示切换成功!')
          this.init()
        } else {
          this.$message.error('展示切换失败')
          this.init()
        }
      })
    },
    // 确认关闭
    handleClose(done) {
      this.$confirm('品牌还未添加,是否退出?')
        .then((_) => {
          this.innerDrawer = false
          done()
        })
        .catch((_) => {})
    },
    // 上传图片
    handleBigPicSuccess(res) {
      if (res.success) {
        this.$message.success('图片上传成功!')
        this.brandInfo.bigPic = res.data.fileUrl
      }
    },
    handleLogoSuccess(res) {
      this.brandInfo.logo = res.data.fileUrl
    }
  }
}
</script>

<style scoped lang="scss">
.brandList {
  .innerEdit {
    .detailInfo {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      padding: 30px;
      margin-top: -20px;
      .el-form-item {
        width: 50%;
        padding-bottom: 10px;
        .avatar-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
          border-color: #409eff;
        }
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 150px;
          height: 150px;
          line-height: 150px;
          text-align: center;
        }
        .avatar {
          width: 150px;
          height: 150px;
          display: block;
        }
        .btn {
          margin: 0 auto;
          transform: translateX(-30%);
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
  }
}
</style>
